<template>
  <div class="children_content">
    <div class="add_btns_box">
      <div class="box_left">
        <div class="title">产品维护</div>
      </div>
      <div class="box_right">
        <!-- <Space>
          <Button type="primary" @click="handleEdit()" icon="md-add">新建模型</Button>
        </Space> -->
      </div>
    </div>

    <div class="content_table">
      <TemplateTable
        ref="tableRef"
        :data="tableData"
        :columns="tableColumns"
        :loading="loading"
        :height="tableHeight"
        :page="pageIndex"
        :page-size="pageSize"
        :total="total"
        border="none"
        size="small"
        stripe
        @page-change="handlePageChange"
      >
        <template #pow="{ row }">
          <Tag
            v-for="(value, key) in MODEL_TYPE"
            @click="asd(row)"
            :key="key"
            v-show="row[key]"
            color="default"
            size="mini"
            >{{ row[key] ? value : '' }}</Tag
          >
        </template>
      </TemplateTable>
    </div>
  </div>
</template>

<script setup>
import { ref, inject, watch, computed, nextTick, getCurrentInstance } from 'vue'
import { Message } from 'view-ui-plus'
import { aimodelPage, aimodelDelete } from '@/api/modules/modelMent'

const MODEL_TYPE = {
  dialoguemodel: '对话模型',
  methodinvocation: '方法调用',
  vectorization: '向量化',
  rearrangement: '重排',
  texttoimage: '文生图',
  imagetoimage: '图生图',
  texttoaudio: '文生音频',
  audiotoaudio: '音频转音频',
  texttovideo: '文生视频',
  imagetovideo: '图片转视频'
}

// 当前对象
const { proxy } = getCurrentInstance()
// 屏幕高度
const screenHeight = inject('screenHeight')
// 表格高度
const tableHeight = ref(0)
// 监听 screenHeight 的变化
watch(
  screenHeight,
  (newHeight) => {
    tableHeight.value = newHeight - 235
  },
  { immediate: true }
)

const pageIndex = ref(1)
const pageSize = 20
const total = ref(0)
const showDialog = ref(false)

const typeId = ref(undefined)

const loading = ref(false)

// 搜索条件字段
const searchObj = ref({
  name: ''
})

// 表格列配置
const tableColumns = computed(() => [
  {
    title: '名字',
    minWidth: 120,
    field: 'name'
  },
  {
    title: '类型',
    minWidth: 120,
    field: 'appkey'
  },
  {
    title: '副标题',
    minWidth: 120,
    field: 'appsecret'
  },
  {
    title: '价格',
    minWidth: 120
  },
  {
    title: '收益',
    minWidth: 120,
    field: 'description'
  },
  {
    title: '简介',
    minWidth: 200,
    field: 'description'
  },
  {
    title: '价格',
    minWidth: 120,
    field: 'description'
  },
  {
    title: '创建时间',
    minWidth: 200,
    field: 'description'
  },
  {
    title: '操作',
    type: 'action',
    width: 120,
    align: 'center',
    fixed: 'right',
    actions: [
      {
        text: '编辑',
        type: 'edit',
        onClick: (row) => handleEdit(row.id)
      },
      {
        text: '删除',
        type: 'del',
        onClick: (row) => handleDel(row)
      }
    ]
  }
])

// 列表数据
const tableData = ref([])
const getPageData = (reset) => {
  if (reset) {
    pageIndex.value = 1
  }

  loading.value = true

  aimodelPage({
    query: {
      p: pageIndex.value,
      ps: pageSize
    },
    data: {
      ...searchObj.value,
      modeltype: modeltype.value
    }
  })
    .then(({ data }) => {
      tableData.value = data?.topicList || []
      total.value = data?.totalElements || 0
    })
    .finally(() => {
      loading.value = false
    })
}

// 处理页码变化
const handlePageChange = (page) => {
  pageIndex.value = page
}

const modeltype = ref(null)
const typeIdChange = (type) => {
  modeltype.value = type

  getPageData(true)
}

const handleDel = (row) => {
  proxy.$Modal.confirm({
    mask: false,
    title: '警告',
    content: '<p>是否删除该数据?</p>',
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      try {
        await aimodelDelete({
          data: {
            id: row.id
          }
        })

        Message.success('删除成功')
        getPageData()
      } catch (error) {
        console.error(error)
        Message.error('删除失败')
      }
    }
  })
}

const editDialogRef = ref(null)
const handleEdit = (id) => {
  showDialog.value = true
  nextTick(() => {
    editDialogRef.value.initDialog(id)
  })
}

// 处理对话框提交
const handleDialogSubmit = () => {
  showDialog.value = false
  // 刷新数据列表
  getPageData(true)
}

const searchChange = () => {
  getPageData(true)
}

// onMounted(() => {
//   getPageData()
// })
</script>

<style scoped lang="scss">
// :deep(.power-column){
//   .vxe-cell{
//     display: flex;
//     flex-wrap: wrap;
//   }
// }
</style>
